<template>
  <div :id="id">
    <a-steps :current="-1" labelPlacement="vertical" size="small" @change="change" class="sw-step">
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active0'}">基本信息</span>
        <div slot="description" :class="{desc:isActive=='active0'}">填写表单基本信息</div>
      </a-step>
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active1'}">软件信息</span>
        <div slot="description" :class="{desc:isActive=='active1'}">对应填写该软件用途</div>
      </a-step>
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active2'}">文件信息</span>
        <div slot="description" :class="{desc2:isActive=='active2'}">上传对应版本软件包文件</div>
      </a-step>
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active3'}">测试信息</span>
        <div slot="description" :class="{desc2:isActive=='active3'}">提交软件包相关测试报告</div>
      </a-step>
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active4'}">发布说明</span>
        <div slot="description" :class="{desc2:isActive=='active4'}">软件功能对应用户告知信息</div>
      </a-step>
      <a-step status="process">
        <span slot="title" :class="{title:isActive=='active5'}">审核流程</span>
        <div slot="description" :class="{desc2:isActive=='active5'}">表单提交后查看流程审核情况</div>
      </a-step>
      <a-step status="process" v-if="audit">
        <span slot="title" :class="{title:isActive=='active6'}">审核意见</span>
        <div slot="description" :class="{desc:isActive=='active6'}">填写审核意见</div>
      </a-step>
      <!-- <a-step status="process" title="软件信息" description="对应填写该软件用途"/>
      <a-step status="process" title="文件信息" description="上传对应版本软件包文件"/>
      <a-step status="process" title="测试信息" description="提交软件包相关测试报告"/>
      <a-step status="process" title="发布说明" description="软件功能对应用户告知信息"/>
      <a-step status="process" title="审核流程" description="表单提交后查看流程审核情况"/>
      <a-step status="process" title="审核意见" description="填写审核意见" v-if="audit"/> -->
    </a-steps>
<!--    <div id="sw-step-1" style="height:2000px">基本信息</div>-->
<!--    <div id="sw-step-2" style="height:2000px">软件信息</div>-->
<!--    <div id="sw-step-3" style="height:2000px">文件信息</div>-->
<!--    <div id="sw-step-4" style="height:2000px">测试信息</div>-->
  </div>
</template>

<script>


  const hashArray = [
    'sw-step-1',
    'sw-step-2',
    'sw-step-3',
    'sw-step-4',
    'sw-step-5',
    'sw-step-6',
    'sw-step-7',
  ]
  let id=0;
  export default{
    name: 'swSteps',
    components: {},
    props: {
      /**
       * 是否审核，默认false，true 将显示审核意见步骤
       */
      audit: {
        type: Boolean,
        default: false
      },
      activeIndex:{
        type: Number,
        default: 0
      },
    },
    watch:{
      activeIndex:{
        handler(val){
          this.isActive=`active${val}`
        }
      }
    },
    data(){
      return {
        isActive:'active0',
        id: id
      }
    },
    created() {
      id ++;
      this.id = 'sw-steps-' + id;
    },
    activated(){
      if(this.$route.query.toReview==1){
        this.isActive='active5'
        document.querySelector("#sw-step-6").scrollIntoView(true);
      }
    },
    methods:{
      change(cur) {
        // console.log('bbbbbbbbbbb',cur)
        this.isActive=`active${cur}`
        let element = document.querySelector(" #" + hashArray[cur]);
        if (element) {
          element.scrollIntoView(true);
          // window.scrollTo({y: element.offsetY})
        }
        // console.log('bbbbbbbbbbb',this.isActive)
      }
    },
    deactivated(){
      this.isActive=`active0`
    }
  }
</script>
<style lang="less">
  @stepWidth:116px;
  .sw-step.ant-steps-label-vertical {
    .ant-steps-item-content {
      width: @stepWidth;
      //width: 116px;
    }
    &.ant-steps-small:not(.ant-steps-dot) .ant-steps-item-icon {
      margin-left: (@stepWidth - 24)/2;
    }
    .ant-steps-item-tail {
      margin-left: @stepWidth/2;
    }
  }
  .title{
    font-weight:bold;
    color:#147092
  }
  .desc{
    border-bottom:2px solid #147092;
    padding:0px 0px 23px 0px
  }
  .desc2{
    border-bottom:2px solid #147092;
    padding:0px 0px 5px 0px
  }
</style>